{% extends webapp_config['LAYOUT'] %}

{% block meta_title %}{{ article.title.rendered|safe }} | Snapcraft{% endblock %}
{% block meta_description %}{{ article.excerpt.raw }}{% endblock %}
{% block meta_copydoc %}{% endblock %}
{% block meta_type %}article{% endblock %}
{% if article.image and article.image.source_url %}
  {% block meta_image %}{{ article.image.source_url }}{% endblock %}
{% endif %}

{% block meta_schema %}
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@id": "https://snapcraft.io/#article",
      "@type": "Article",
      "name": "{{ article.title.renderered|safe }}",
      "author": {
         "@type": "Person",
         "name": "{{ article.author.name }}"
      },
      "datePublished": "{{ article.date_gmt }}",
      {% if article.image and article.image.source_url %}
        "image": "{{ article.image.source_url }}",
      {% endif %}
      "url": "https://snapcraft.io{{ self.meta_path() }}",
      "publisher": {
        "@type": "Organization",
        "name": "Snapcraft"
      }
    }
  </script>
{% endblock %}

{% block extra_meta %}
  <meta property="og:type" content="article" />
  <meta property="article:published_time" content="{{ article.date_gmt }}" />
  <meta property="article:author" content="{{ article.author.name }}" />
{% endblock %}

{% block content %}
<section id="main-content" class="p-strip">
  {% if newsletter_subscribed %}
    <div class="row">
      <div class="p-notification--positive">
        <div class="p-notification__response"><b>Success:</b> Thanks for subscribing!</div>
      </div>
    </div>
  {% endif %}
  <div class="row">
    <div class="col-8 p-blog-post">
      <h1 class="p-heading--two">{{ article.title.rendered|safe }}</h1>
      <p>by {{ article.author.name }} on {{ article.date }}</p>
      {{ article.content.rendered|safe }}
    </div>
    <div class="col-4">
      {% include 'partials/_newsletter-signup.html' %}
    {% if is_in_series %}
      {% for tag in tags %}
        {% if tag.name.startswith('sc:series') %}
          <div class="p-blog-aside">
            <h4>In this series</h4>
            <ul class="p-list p-blog-list" data-js="blog-series" data-series="{{ tag.id }}" data-currentslug="{{ article.slug }}">
              <li class="p-list__item u-align--center">
                <i class="p-icon--spinner u-animation--spin"></i>
              </li>
            </ul>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
    </div>
  </div>
</section>

{% if related_articles %}
  <section class="p-strip is-shallow">
    <div class="u-fixed-width">
      <h3>
        Related posts
      </h3>
    </div>
    <div class="row p-divider">
      {% for related_article in related_articles %}
        <div class="col-4 p-divider__block">
          <h4>
            <a href="/blog/{{ related_article.slug }}">
              {{ related_article.title.rendered|safe }}
            </a>
          </h4>
          <p>{{ related_article.excerpt.raw }}</p>
        </div>
      {% endfor %}
    </div>
  </section>
{% endif %}

<script type="text/template" id="blog-series-item-template">
  <li class="p-list__item">
    <h5>
      <a href="/blog/${slug}" class="p-blog-list__item ${className}">
        ${title}
      </a>
    </h5>
  </li>
</script>
{% endblock %}

{% block scripts_includes %}
  <script src="{{ static_url('js/dist/public.js') }}" defer></script>
{% endblock %}

{% block scripts %}
  <script>
    window.addEventListener("DOMContentLoaded", function() {
      Raven.context(function () {
        {% if is_in_series %}
        snapcraft.public.seriesPosts('[data-js="blog-series"]', '#blog-series-item-template');
        {% endif %}

        snapcraft.public.newsletter();
        snapcraft.public.formValidation();
      });
    });
  </script>
{% endblock %}
